<template>
	<view class="content-box">
		<view class="title">
			未来计划
		</view>
		<view class="date-box">
			<view class="date">
				{{startDate?`${startDate} ~ ${endDate}`:'空'}}
			</view>
			<view class="" @click="calendarShow=true">
				重新选择
			</view>
		</view>

		<view class="place-box">
			<view class="place1" @click="setPlace('startArea')">
				{{startArea.address||'起点'}}
			</view>
			<view class="line">

			</view>
			<view class="place2" @click="setPlace('endArea')">
				{{endArea.address||'终点'}}
			</view>
		</view>
		<u-calendar :show="calendarShow" mode="range" @confirm="confirm" @close="closeCalendar" showLunar
			monthNum="12"></u-calendar>
<!-- 		<UniAddressSelector v-if="showUniAddressSelector" :areaInfoSelected="areaInfoObj" @cancel="handleCancel"
			@confirm="handleConfirm">
		</UniAddressSelector> -->
		<view class="btn" @click="submit">
			确定
		</view>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	// import UniAddressSelector from '@/components/UniAddressSelector/UniAddressSelector.vue'
	// let pathType=null
	export default {
		// components: {
		// 	UniAddressSelector
		// },
		data() {
			return {
				showUniAddressSelector: false,
				calendarShow: true,
				startDate: '',
				endDate: '',
				startArea: {
					addressLng: '',
					addressLat: '',
					address: '',
					code: ''
				},
				endArea: {
					addressLng: '',
					addressLat: '',
					address: '',
					code: ''
				},
			}
		},
		methods: {
			closeCalendar() {
				this.calendarShow = false
			},
			confirm(e) {
				console.log(e)
				this.startDate = e[0]
				this.endDate = e[e.length - 1]
				this.closeCalendar()
			},
			setPlace(name) {
				let that = this
				uni.chooseLocation({
					success: function(res) {
						console.log('hahahaha',name,res)
						that[name].addressLng = res.longitude
						that[name].addressLat = res.latitude
						that[name].address = res.name
						uni.request({
							url: 'https://restapi.amap.com/v3/geocode/regeo',
							data: {
								key: 'a1b1763664b900d6f3a61dd992973dbf',
								location: `${res.longitude},${res.latitude}`
							},
							success(ress) {
								let data = ress.data.regeocode.addressComponent
								that[name].code = data.adcode
								that[name].address = res.name || (data.city + data.district + data
									.township)
							}
						})
					},
					fail: function(err) {
						wx.getSetting({
							success: function(res) {
								var statu = res.authSetting;
								if (!statu['scope.userLocation']) {
									wx.showModal({
										title: '是否授权当前位置',
										content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
										success(tip) {
											if (tip.confirm) {
												wx.openSetting({
													success: function(data) {
														if (data.authSetting[
																"scope.userLocation"
															] === true) {
															wx.showToast({
																title: '授权成功',
																icon: 'success',
																duration: 1000
															})
															//回调 重新打开地图
															that.setPlace()
														}
													}
												})
											} else {
												wx.showToast({
													title: '授权失败',
													icon: 'none',
													duration: 1000
												})
											}
										}
									})

								}
							}
						})
					}
				});
			},
			submit() {
				
				if(!this.startArea.code||!this.endArea.code) return this.$refs.uToast.show({
						message: "请完善起始地址！"
					})
				let data = {
					startTime: this.startDate ? this.startDate + ' 00:00:00' : '',
					endTime: this.endDate ? this.endDate + ' 23:59:59' : '',
					startLocation: this.startArea.address,
					startAddressLng: this.startArea.addressLng,
					startAddressLat: this.startArea.addressLat,
					startAreaCode: this.startArea.code,
					
					endLocation: this.endArea.address,
					endAddressLng: this.endArea.addressLng,
					endAddressLat: this.endArea.addressLat,
					endAreaCode: this.endArea.code,

				}
				this.$myRequest('/api/driver/mine/v1/save/itinerary', data, 'POST').then(res => {
					this.$refs.uToast.show({
						message: "添加成功！",
						complete() {
							uni.navigateBack({
								delta: 1
							})
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.content-box {
		.title {
			font-size: 28rpx;
			color: #333333;
			font-weight: 700;
			position: relative;
			padding-left: 20rpx;

			&:before {
				content: '';
				width: 12rpx;
				height: 24rpx;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				background: $theme-color;
			}
		}

		.date-box {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #999999;
			justify-content: space-between;
			padding: 36rpx 20rpx 60rpx 20rpx;

			.date {
				padding: 8rpx 26rpx;
				min-width: 360rpx;
				text-align: center;
				border: 2rpx dashed rgba(255, 120, 99, 0.651);
				background: linear-gradient(129deg, #FFFFFF 0%, #FFFAD6 49%, #FFFFFF 100%);
				border-radius: 12rpx;
			}
		}

		.place-box {
			padding: 0 20rpx;

			.place1,
			.place2 {
				height: 82rpx;
				border-radius: 8rpx;
				font-size: 28rpx;
				font-weight: bold;
				line-height: 82rpx;
				text-align: center;
				color: #1C1C1C;
			}

			.place1 {
				background: rgba(72, 212, 242, 0.19);
			}

			.line {
				width: 2rpx;
				height: 32rpx;
				background-color: #CBCBCB;
				margin: 24rpx auto;
			}

			.place2 {
				background: rgba(254, 206, 99, .19);
			}
		}


		.btn {
			width: 420rpx;
			height: 80rpx;
			background: #FFCE4E;
			border-radius: 40rpx;
			font-size: 28rpx;
			line-height: 80rpx;
			color: #FFFFFF;
			text-align: center;
			margin: 190rpx auto 0 auto;
		}
	}
</style>